<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .list {
        width: 990px;
        margin: 100px auto 0;
      }

      .item {
        padding: 15px;
        transition: all 0.5s;
        display: flex;
        border-top: 1px solid #e4e4e4;
      }

      .item:nth-child(4n) {
        margin-left: 0;
      }

      .item:hover {
        cursor: pointer;
        background-color: #f5f5f5;
      }

      .item img {
        width: 80px;
        height: 80px;
        margin-right: 10px;
      }

      .item .name {
        font-size: 18px;
        margin-right: 10px;
        color: #333;
        flex: 2;
      }

      .item .name .tag {
        display: block;
        padding: 2px;
        font-size: 12px;
        color: #999;
      }

      .item .price,
      .item .sub-total {
        font-size: 18px;
        color: firebrick;
        flex: 1;
      }

      .item .price::before,
      .item .sub-total::before,
      .amount::before {
        content: '¥';
        font-size: 12px;
      }

      .item .spec {
        flex: 2;
        color: #888;
        font-size: 14px;
      }

      .item .count {
        flex: 1;
        color: #aaa;
      }

      .total {
        width: 990px;
        margin: 0 auto;
        display: flex;
        justify-content: flex-end;
        border-top: 1px solid #e4e4e4;
        padding: 20px;
      }

      .total .amount {
        font-size: 18px;
        color: firebrick;
        font-weight: bold;
        margin-right: 50px;
      }
    </style>
  </head>

  <body>
    <div class="list">
      <!-- <div class="item">
      <img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt="">
      <p class="name">称心如意手摇咖啡磨豆机咖啡豆研磨机 <span class="tag">【赠品】10优惠券</span></p>
      <p class="spec">白色/10寸</p>
      <p class="price">289.90</p>
      <p class="count">x2</p>
      <p class="sub-total">579.80</p>
    </div> -->
    </div>
    <div class="total">
      <div>合计：<span class="amount">1000.00</span></div>
    </div>
    <script>
      const goodsList = [
        {
          id: '4001172',
          name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
          price: 289.9,
          picture:
            'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
          count: 2,
          spec: { color: '白色' },
        },
        {
          id: '4001009',
          name: '竹制干泡茶盘正方形沥水茶台品茶盘',
          price: 109.8,
          picture:
            'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
          count: 3,
          spec: { size: '40cm*40cm', color: '黑色' },
        },
        {
          id: '4001874',
          name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
          price: 488,
          picture:
            'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
          count: 1,
          spec: { color: '青色', sum: '一大四小' },
        },
        {
          id: '4001649',
          name: '大师监制龙泉青瓷茶叶罐',
          price: 139,
          picture:
            'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
          count: 1,
          spec: { size: '小号', color: '紫色' },
          gift: '50g茶叶,清洗球',
        },
      ]

      //获取元素
      const list = document.querySelector('.list')
      const amount = document.querySelector('.amount')

      //声明渲染函数
      const render = (data) => {
        //遍历数据，输出模版
        let html = data
          //解构对象，获得每一个值
          .map(({ name, price, picture, count, spec, gift }) => {
            return `<div class="item">
             <img src="${picture}" alt="">
             <p class="name">${name} ${
              gift
                ? gift
                    .split(',')
                    .map((item) => `<span class="tag">【赠品】${item}</span>`)
                    .join('')
                : ''
            }</p>
             <p class="spec">${Object.values(spec).join('/')}</p>
             <p class="price">${price.toFixed(2)}</p>
             <p class="count">x${count}</p>
             <p class="sub-total">${(price * count).toFixed(2)}</p>
           </div>`
          })
          .join('')

        //输出模版
        list.innerHTML = html

        //合计价格
        const totalPrice = data.reduce((prev, item) => {
          return item.price * item.count + prev
        }, 0)

        amount.innerHTML = totalPrice.toFixed(2)
      }

      render(goodsList)
    </script>
  </body>
</html>
